<script setup lang="ts">
  useHead({
    titleTemplate: `%s | 请求测试1`,
    meta: [
      {
        name: "description",
        content: "请求测试页面"
      }
    ]
  })

  const list = ref([])
  const getData = async () => {

      // 在SSR中数据将被获取两次，一次在服务器端，一次在客户端（各发送一次请求）
      // const { result, data } = await $fetch("/dev/users/list"); // 不处理会报跨域错误
      // if(result === 0){
      //     list.value = data;
      // }

      // 在SSR中，数据仅在服务器端获取并传递到客户端(仅在服务端发送请求， 将状态传递给客户端)
      // const res2 = await useAsyncData("key1", () => $fetch("http://localhost:3001/users/list"))
      // let { result, data } = res2?.data?.value;
      // if(result === 0){
      //     list.value = data;
      // }

      // 便捷api(  useFetch  = useAsyncData + $fetch )
      const res = await useFetch("/dev/users/list")
      //@ts-ignore
      let { result, data } = res?.data?.value;
      if(result === 0){
          list.value = data;
      }
  }

  await getData();  // SSR渲染时await用于解决水合节点不一致
  // getData();

  const currentUser = ref(null)
  const sendClientRequest = async () => {
      //@ts-ignore
      const { result, data }  = await $fetch("/dev/users/1")
      if(result === 0){
        currentUser.value = data;
      }
  }
</script>

<template>
    <div>
      <div class="text-xl">首页</div>
        <!-- <ClientOnly> -->
          <ul>
            <!-- @vue-ignore -->
            <li v-for="item in list" :key="item?.id">
               <!-- @vue-ignore -->
              {{  item?.name }}
            </li>
          </ul>
        <!-- </ClientOnly> -->
        <div v-if="currentUser">{{ currentUser }}</div>
        <UButton @click="sendClientRequest">请求数据</UButton>
    </div>
</template>

<style scoped>

</style>